<template>
  <NstdInput
    v-bind="attrs"
    v-model="value"
    style="width: 100%"
    @blur="props.blur ? props.blur($event) : false"
    @focus="props.focus ? props.focus($event) : false"
    @change="props.change ? props.change($event) : false"
    @input="props.input ? props.input($event) : false"
    @clear="props.clear ? props.clear() : false"
  >
    <template #[slotName]>
      <component
        :is="attrs.slotRender === 'AppendBtn' ? AppendBtn : attrs.slotRender"
        @click="props.appendBtnClick(attrs)"
        :column="attrs"
      />
    </template>
  </NstdInput>
</template>
<script setup>
  import AppendBtn from './AppendBtn.vue';
  const attrs = useAttrs();
  const emit = defineEmits(['update:modelValue']);
  const props = defineProps({
    modelValue: {
      type: String,
      default: () => ''
    },
    slotName: {
      type: String,
      default: ''
    },
    blur: {
      type: Function,
      default: () => () => {}
    },
    focus: {
      type: Function,
      default: () => () => {}
    },
    change: {
      type: Function,
      default: () => () => {}
    },
    input: {
      type: Function,
      default: () => () => {}
    },
    clear: {
      type: Function,
      default: () => () => {}
    },
    appendBtnClick: {
      type: Function,
      default: () => () => {}
    }
  });
  const value = ref(props.modelValue);
  //监听父组件的值
  watch(
    () => props.modelValue,
    () => {
      value.value = props.modelValue;
    }
  );
  // 通过emit将值传递给父组件
  emit('update:modelValue', value);
</script>

<style lang="scss" scoped>
  .el-input {
    ::v-deep .el-input__wrapper.is-focus {
      box-shadow: 0 0 0 1px var(--el-input-hover-border-color) inset;
    }
    ::v-deep .el-input-group__append,
    ::v-deep .el-input-group__prepend {
      padding: 0;
    }
  }
</style>
